import React from 'react'
import { Input, Button, List } from 'antd'

const TodoListUI = (props) => (
  <div style={{ marginTop: '10px', marginLeft: '10px' }}>
    <div>
      <Input
        placeholder="todo info"
        style={{ width: '300px', marginRight: '10px' }}
        value={props.inputValue}
        onChange={props.handleInputChange}
      />
      <Button onClick={props.handleClick} type="primary">
        提交
      </Button>
    </div>
    <List
      style={{ marginTop: '10px', width: '374px' }}
      bordered
      dataSource={props.list}
      renderItem={(item, index) => (
        <List.Item
          onClick={() => {
            props.handleDeleteItem(index)
          }}
        >
          {item}
        </List.Item>
      )}
    />
  </div>
)

export default TodoListUI
